<template>
    <div class="list-cell" :class="[disabled === true  ? 'list-cell-disabled' : '']"
         @click="onClick">
        <svg style="position: absolute;width: 0px;height: 0px;overflow: hidden;">
            <symbol id="icon-arrow" viewBox="0 0 1024 1024">
                <path d="M769.216 511.936c0-3.712-1.152-7.232-1.856-10.88-0.64-2.368-0.64-4.8-1.408-7.04a50.56 50.56 0 0 0-11.136-17.344l-417.28-417.28a48.96 48.96 0 0 0-68.992-0.96 48.832 48.832 0 0 0 1.024 68.864L654.208 512l-384.64 384.768a48.768 48.768 0 0 0-1.024 68.8 48.768 48.768 0 0 0 68.864-0.96l417.28-417.344a51.2 51.2 0 0 0 11.136-17.344c0.896-2.304 0.896-4.736 1.472-7.04 0.768-3.648 1.92-7.232 1.92-10.944z"></path>
            </symbol>
        </svg>
        <div class="list-cell-container" :class="[showBorder === true ? 'list-cell-border':'']">
            <div class="list-cell-content">
                <div class="list-cell-content-title" v-if="showLeftSlot === false">{{title}}</div>
                <div class="list-cell-content-note" v-if="note && showLeftSlot === false">{{note}}</div>
                <!--左边内容槽-->
                <slot name="leftSlot"></slot>
                <slot></slot>
            </div>
            <div class="list-cell-extra" v-if="showArrow === true || showRightSlot === true">
                <!--右边内容槽-->
                <slot name="rightSlot"></slot>
                <i class="list-cell-extra-icon" v-if="showArrow === true">
                    <svg class="svg" aria-hidden="true">
                        <use xlink:href="#icon-arrow"></use>
                    </svg>
                </i>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
    import {Component, Prop, Vue, Emit} from "vue-property-decorator";


    @Component({})
    // 列表子项
    export default class ListCell extends Vue {
        // 列表标题
        @Prop({default: "", type: String})
        private title!: string;
        // 列表描述
        @Prop({default: "", type: String})
        private note!: string;
        // 是否禁用
        @Prop({default: false, type: Boolean})
        private disabled!: boolean;
        // 是否显示箭头
        @Prop({default: true, type: Boolean})
        private showArrow!: boolean;
        // 是否显示左边槽
        @Prop({default: false, type: Boolean})
        private showLeftSlot!: boolean;
        // 是否显示右边槽
        @Prop({default: false, type: Boolean})
        private showRightSlot!: boolean;
        // 是否显示底部边框
        @Prop({default: true, type: Boolean})
        private showBorder!: boolean;


        // 点击list触发事件
        @Emit("click")
        private onClick(): void {
        }
    }
</script>

<style scoped lang="stylus">
    .list-cell
        font-size: 16px;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        background #fff;

        &.disabled
            opacity .3;

        .list-cell-container
            padding: 11px 15px;
            width 100%;
            box-sizing border-box;
            flex 1;
            position relative;
            display flex;
            flex-direction row;
            justify-content space-between;
            align-items center;

            &.list-cell-border
                &:after
                    position absolute;
                    z-index 3;
                    right 0;
                    bottom 0;
                    left 15px;
                    height 1px;
                    content '';
                    transform scaleY(.5);
                    background-color #c8c7cc;

            .list-cell-content
                flex 1;
                overflow hidden;
                display flex;
                flex-direction column;

                .list-cell-content-title
                    font-size 15px;
                    color #4c4c4c;
                    text-overflow ellipsis;
                    white-space nowrap;
                    line-height 1.5;
                    overflow hidden;

                .list-cell-content-note
                    color #8f8f94;
                    font-size 13px;
                    line-height 1.1
                    white-space normal;
                    display -webkit-box;
                    -webkit-box-orient vertical;
                    -webkit-line-clamp 2;
                    overflow hidden;

            .list-cell-extra
                width 25%;
                display flex;
                flex-direction row;
                justify-content flex-end;
                align-items center;

                .list-cell-extra-icon
                    display flex;
                    flex-direction row;
                    justify-content center;
                    align-items center;
                    color #bbb;

                    .svg
                        width 16px;
                        height 16px;
                        vertical-align -2.5px;
                        fill currentColor;
                        overflow hidden;
</style>
